<script setup lang="ts">
// 生意参谋 竞争 品牌分析 销售分析 TOP店铺
import BaseApp from "~/contentScripts/views/sycm/baseApp.vue";
import {SycmBrandLists, SycmBrandMonitor} from "~/contentScripts/views/sycm/brand_monitor/SycmBrandMonitor";
import {Shop, ShopLists, SycmShopAnalysisSale} from "~/contentScripts/views/sycm/shop_analysis/SycmShopAnalysisSale";
import User from "~/contentScripts/views/tao/list/components/user.vue";
import {isLogin} from "~/logic";
import {SycmTableUtils} from "~/utils/sycm/SycmTableUtils";

const date = ref<string>('');
const loading = ref<boolean>(false);
const loginVisible = ref<boolean>(false);
const visible = ref<boolean>(false);
const showZs = ref<boolean>(false);
const brandLists = ref<SycmBrandLists>();
const dates = ref<Array<String>>([]);
const columns = ref<Array<any>>([]);
const dataSource = ref<Array<any>>([]);
const calcDataSource = () => {
  dataSource.value = [];
  const data: any[] = [];
  // 获取 品牌 中topShopTable的最大长度
  const maxLen = Math.max(
      brandLists.value?.brand1?.topShopTable.length || 0,
      brandLists.value?.brand2?.topShopTable.length || 0,
      brandLists.value?.brand3?.topShopTable.length || 0,
  );
  for (let index = 0; index < maxLen; index++) {
    if (brandLists.value?.brand1 && typeof brandLists.value?.brand1?.topShopTable[index] !== 'undefined') {
      let obj = {
        brand: {
          title: brandLists.value?.brand1?.name,
          logo: brandLists.value?.brand1?.picUrl,
        },
        type: '品牌1',
        ...{
          ...brandLists.value?.brand1?.topShopTable[index],
          shop: brandLists.value?.brand1?.topShopTable[index].shop,
          tradeGrowthRange: brandLists.value?.brand1?.topShopTable[index].tradeGrowthRange || {
            value: null,
            cycleCrc: null
          },
          date: date.value,
          // item: brandLists.value?.brand1?.topShopTable[index].item,
          payAmt: brandLists.value?.brand1?.topShopTable[index].payAmt,
          tradeIndex: brandLists.value?.brand1?.topShopTable[index].tradeIndex || {
            value: null,
            cycleCrc: null
          },
          uvIndex: brandLists.value?.brand1?.topShopTable[index].uvIndex || {
            value: null,
            cycleCrc: null
          },
        }
      };
      data.push(obj);
    }
    if (brandLists.value?.brand2 && typeof brandLists.value?.brand2?.topShopTable[index] !== 'undefined') {
      let obj = {
        brand: {
          title: brandLists.value?.brand2?.name,
          logo: brandLists.value?.brand2?.picUrl,
        },
        type: '品牌2',
        ...{
          ...brandLists.value?.brand2?.topShopTable[index],
          shop: brandLists.value?.brand2?.topShopTable[index].shop,
          tradeGrowthRange: brandLists.value?.brand2?.topShopTable[index].tradeGrowthRange || {
            value: null,
            cycleCrc: null
          },
          date: date.value,
          // item: brandLists.value?.brand2.topShopTable[index].item,
          payAmt: brandLists.value?.brand2.topShopTable[index].payAmt,
          tradeIndex: brandLists.value?.brand2.topShopTable[index].tradeIndex || {
            value: null,
            cycleCrc: null
          },
          uvIndex: brandLists.value?.brand2.topShopTable[index].uvIndex || {
            value: null,
            cycleCrc: null
          },
        }
      };
      data.push(obj);
    }
    if (brandLists.value?.brand3 && typeof brandLists.value?.brand3?.topShopTable[index] !== 'undefined') {
      let obj = {
        brand: {
          title: brandLists.value?.brand3.name,
          logo: brandLists.value?.brand3.picUrl,
        },
        type: '品牌2',
        ...{
          ...brandLists.value?.brand3?.topShopTable[index],
          shop: brandLists.value?.brand3.topShopTable[index].shop,
          date: date.value,
          tradeGrowthRange: brandLists.value?.brand3?.topShopTable[index].tradeGrowthRange || {
            value: null,
            cycleCrc: null
          },
          // item: brandLists.value?.brand3.topShopTable[index].item,
          payAmt: brandLists.value?.brand3.topShopTable[index].payAmt,
          tradeIndex: brandLists.value?.brand3.topShopTable[index].tradeIndex || {
            value: null,
            cycleCrc: null
          },
          uvIndex: brandLists.value?.brand3.topShopTable[index].uvIndex || {
            value: null,
            cycleCrc: null
          },
        }
      };
      data.push(obj);
    }
  }
  console.log(data);
  dataSource.value = data;
};
const calcColumns = () => {
  columns.value = [
    // {
    //   dataIndex: 'item.title',
    //   title: '商品名称',
    //   width: 200,
    //   fixed: 'left',
    //   dataType: 'product',
    //   sorter: (a: any, b: any) => a.item.title.localeCompare(b.item.title),
    //   dataField: {
    //     item_pic: 'item.pictUrl',
    //     item_url: 'item.detailUrl',
    //     item_title: 'item.title',
    //   }
    // },
    {
      dataIndex: 'shop.title',
      title: '店铺名称',
      width: 120,
      fixed: 'left',
      dataType: 'shop',
      sorter: (a: any, b: any) => a.shop.title.localeCompare(b.shop.title),
      dataField: {
        shop_title: 'shop.title',
        // shop_pic: 'shop.logo',
        // shop_id: 'shop.shopId',
      },
    },
    {
      dataIndex: 'brand.title',
      title: '品牌名称',
      dataType: 'brand',
      width: 160,
      fixed: 'left',
      sorter: (a: any, b: any) => a.brand.title.localeCompare(b.brand.title),
      dataField: {
        brand_name: 'brand.title',
        brand_logo: 'brand.logo',
        // brand_url:'brand.brand_url',
      }
    },
    {
      dataIndex: 'type',
      title: '类别',
      width: 80,
      sorter: (a: any, b: any) => a.type.localeCompare(b.type),
      dataType: 'custom',
      slot: 'type',
    },
    {
      dataIndex: 'date',
      title: '日期',
      width: 180,
      fixed: 'left',
      sorter: (a: any, b: any) => a.date.localeCompare(b.date),
    },
    {
      dataIndex: 'tradeIndex.value',
      title: showZs.value ? '交易指数' : '交易金额',
      sorter: (a: any, b: any) => a.tradeIndex.value - b.tradeIndex.value,
      align: 'right',
      dataType: 'customRender',
      render: (text: any, record: any) => {
        if (record.tradeIndex.value === null) {
          return '-';
        }
        if (showZs.value) {
          return record.tradeIndex.value;
        }
        return SycmTableUtils.tranNumber(showZs.value, record.tradeIndex.value, 0, false);
      }
    },
    {
      dataIndex: 'uvIndex.value',
      title: showZs.value ? '流量指数' : '访客数',
      sorter: (a: any, b: any) => a.uvIndex.value - b.uvIndex.value,
      align: 'right',
      dataType: 'customRender',
      render: (text: any, record: any) => {
        if (record.uvIndex.value === null) {
          return '-';
        }
        if (showZs.value) {
          return record.uvIndex.value;
        }
        return SycmTableUtils.tranNumber(showZs.value, record.uvIndex.value, 0, false);
      }
    },
    {
      dataIndex: 'seIpvUvHits.value',
      title: showZs.value ? '搜索人气' : '搜索人数',
      sorter: (a: any, b: any) => a.seIpvUvHits.value - b.seIpvUvHits.value,
      align: 'right',
      dataType: 'customRender',
      render: (text: any, record: any) => {
        if (typeof record.seIpvUvHits == "undefined" || record.seIpvUvHits.value === null) {
          return '-';
        }
        if (showZs.value) {
          return record.seIpvUvHits.value;
        }
        return SycmTableUtils.tranNumber(showZs.value, record.seIpvUvHits.value, 0, false);
      }
    },
    {
      dataIndex: 'payRateIndex.value',
      title: showZs.value ? '支付转化指数' : '支付转化率',
      sorter: (a: any, b: any) => a.payRateIndex.value - b.payRateIndex.value,
      align: 'right',
      dataType: 'customRender',
      render: (text: any, record: any) => {
        if (typeof record.payRateIndex == 'undefined' || record.payRateIndex.value === null) {
          return '-';
        }
        if (showZs.value) {
          return record.payRateIndex.value;
        }
        return SycmTableUtils.tranRatio(showZs.value, record.payRateIndex.value);
      }
    },
    ...showZs.value ? [] : [
      {
        dataIndex: 'searchRate',
        title: '搜索占比',
        sorter: (a: any, b: any) => a.searchRate - b.searchRate,
        align: 'right',
        dataType: 'customRender',
        render: (text: any, record: any) => {
          if (typeof record.searchRate == 'undefined' || record.searchRate === null) {
            return '-';
          }
          return (text * 100).toFixed(2) + '%';
        }
      },
      {
        dataIndex: 'payByrCnt',
        title: '支付买家数',
        sorter: (a: any, b: any) => a.payByrCnt - b.payByrCnt,
        align: 'right',
      },
      {
        dataIndex: 'customerPrice',
        title: '客单价',
        sorter: (a: any, b: any) => a.customerPrice - b.customerPrice,
        align: 'right',
      },
      {
        dataIndex: 'uvValue',
        title: 'uv价值',
        sorter: (a: any, b: any) => a.uvValue - b.uvValue,
        align: 'right',
      }
    ],
    {
      dataIndex: 'tradeGrowthRange.value',
      title: '交易增长幅',
      sorter: (a: any, b: any) => a.tradeGrowthRange.value - b.tradeGrowthRange.value,
      align: 'right',
      dataType: 'custom',
      slot: 'tradeGrowthRange',
    }
  ];
}

const __option = getCurrentInstance()?.appContext.provides.option;
const handle = async () => {
  if (isLogin({
    emit: () => {
      loginVisible.value = true;
    },
  },__option)) {
    loading.value = true;
    date.value = document.querySelector(".oui-date-picker-current-date").innerHTML.replaceAll('统计时间', '').replaceAll(' ', '').replaceAll('\n', '').replaceAll('\t', '');
    // console.log(await SycmBrandMonitor.getBrands());
    // return;
    brandLists.value = await SycmBrandMonitor.assignBrandListTopShopTable(await SycmBrandMonitor.getBrands());
    console.log('topShop',brandLists);
    calcColumns();
    calcDataSource();
    loading.value = false;
    visible.value = true;
  }
}
watch(() => showZs.value, () => {
  calcColumns();
  calcDataSource();
}, {deep: true});
</script>

<template>
  <base-app>
    <a-button-group>
      <user style="margin-right: 0;"/>
      <a-button type="primary" size="small" @click="handle" :loading="loading">
        一键转化
      </a-button>
    </a-button-group>
    <user-login-modal v-model:login-visible="loginVisible"/>
    <custom-modal :title="`竞争-竞店分析-销售分析-TOP店铺`" width="95%" style="top: 20px;" v-model:open="visible">
      <template #headerRight>
        <SYCMCustomModalHeaderNotice/>
        <a-checkbox style="margin-left: 10px;" v-model:checked="showZs">显示指数</a-checkbox>
      </template>
      <div style="max-height: calc(100vh - 130px);min-height:750px;overflow-y: auto;">
        <base-table table-name="竞争-竞店分析-销售分析-TOP店铺" :columns="columns" :data-source="dataSource"
                    :scroll="{
        y:670,
        // x:2200,
      }"
        >
          <template #type="record">
            <a-tag color="green" v-if="record.type==='品牌1'">
              品牌1
            </a-tag>
            <a-tag color="purple" v-else-if="record.type==='品牌2'">
              品牌2
            </a-tag>
            <a-tag color="orange" v-else-if="record.type==='品牌3'">
              品牌3
            </a-tag>
          </template>
          <template #tradeGrowthRange="record">
            <!--          // 上升为红色两位小数点+百分比-->
            <span :style="{
            color: record.tradeGrowthRange.value>0?'red':'green'
          }"
            >{{ record.tradeGrowthRange.value > 0 ? '+' : '' }}{{
                (record.tradeGrowthRange.value * 100).toFixed(2)
              }}%</span>
          </template>
        </base-table>
      </div>

    </custom-modal>
  </base-app>
</template>

<style scoped>

</style>
